<template>
  <div id="app">
    <h1>{{error}}</h1>
    <h1>{{count}}</h1>
    <h1>{{double}}</h1>
    <h1>{{greetings}}</h1>
    <Suspense>
      <template #default>
        <!-- <async-show />  // slots expect a single root node -->
        <dog-Show />
      </template>
      <template #fallback>
        <h1>loading...</h1>
      </template>
    </Suspense>
    <button @click="openModal">open modal</button>
    <h1>x:{{x}} y:{{y}}</h1>
    <h1 v-if="loading"> loading ...</h1>
    <img v-if="loaded" :src="result[0].url">
    <button @click="increase">👍+1</button>
    <button @click="updateGreeting">updateGreeting</button>
    <Modal :isOpen="modalIsOpen"  @close-modal="openModalClose"> </Modal>
  </div>
</template>

<script lang="ts">
import { ref, computed, reactive, toRefs, watch, onErrorCaptured } from 'vue';
import useMousePosition from './hooks/useMousePosition'
import useURLLoader from './hooks/useURLLoader'
import Modal from './components/Modal.vue'
import AsyncShow from './components/AsyncShow.vue'
import DogShow from './components/DogShow.vue'
interface DataProps {
  count: number;
  double: number;
  increase: () => void;
}
interface DogResult {
  message: string,
  status: string
}
interface CatResult {
  id: string
  url:string
  width: number
  height: number
}
export default ({
  name: 'App',
  // 把变量包裹在一个对象中，使用reactive可能会丧失响应性，toRefs()函数可以将reactive()创建出来的响应式对象，转换为普通对象
  // 只不过这个对象上的每个属性节点，都是ref()类型的响应式数据
  components:{
    Modal,
    // AsyncShow,
    DogShow
  },
  setup() {
    // const count = ref(0)
    // const double = computed(() => {
    //   return count.value * 2 
    // })
    // const increase = () => {
    //   count.value++
    // }
    const error = ref(null)
    onErrorCaptured((e: any) => {
      error.value = e
      return true
    })
    const data: DataProps = reactive({
      count: 0,
      increase: () => {data.count++},
      double: computed(() => data.count * 2)
    })
    const greetings = ref('')
    const updateGreeting = () => {
      greetings.value += 'Hello'
    }
    const { x, y } = useMousePosition()
    // const { result, loading, loaded} = useURLLoader<DogResult>('https://dog.ceo/api/breeds/image/random')
    const { result, loading, loaded} = useURLLoader<CatResult>('https://api.thecatapi.com/v1/images/search')  
    watch(result, () => {
      if(result.value) {
        // console.log('value', result.value[0].url);
      }
    })
    const refData = toRefs(data)
    const modalIsOpen = ref(false)
    const openModal = () => {
      modalIsOpen.value = true
    }
    const openModalClose = () => {
      modalIsOpen.value = false
    }
    refData.increase
      return {
        ...refData,
        greetings,
        updateGreeting,
        x,
        y,
        result,
        loading,
        loaded,
        modalIsOpen,
        openModal,
        openModalClose,
        error
      }
 }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
